﻿<!DOCTYPE html>
<html>
<head>
    <title>所有栏目</title>$css()
</head>
<body>
    <div class="autoStyle">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td width="300px">
                    <div class="control">
                    <!--
                        <div class="top">
                            <ul>
                                <li><a href="javascript:;" class="fn" fn="create">$icon(create)添加</a></li>
                                <li><a href="javascript:;" class="fn" fn="del">$icon(delete)删除</a></li>
                                <li><a href="javascript:;" class="fn" fn="loadData">$icon(refresh)刷新</a></li>
                            </ul>
                        </div>
                    -->
                        <div class="main autoHeight">
                            <table cellspacing="0" cellpadding="0" class="ui-table ui-table-list ui-table-low" id="categories">
                                <thead>
                                    <tr>
                                        <th class="hidden">
                                            ID
                                        </th>
                                        <th style="text-align: left; padding-left: 10px">
                                            栏目名称
                                        </th>
                                        <th width="100" style="text-align: left;">
                                            标签
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                            <div id="plist">
                            </div>
                        </div>
                        <div class="ui-table-meta" id="pager">
                            共-个栏目</div>
                    </div>
                </td>
                <td>
                    <div id="pl" class="relative autoHeight autoScroll"></div>
                </td>
            </tr>
        </table>
    </div>

    
    <script type="text/template" id="list_menu_tpl">
        <div class="item" onclick="menu.add()">
            <a href="javascript:;">$icon(create)新建栏目</a>
        </div>
        <div class="item" onclick="menu.refresh()">
            <a href="javascript:;">$icon(refresh)刷新</a>
        </div>
    </script>

    <script type="text/template" id="tpl">
        <div class="item" onclick="menu.add()">
            <a href="javascript:;">$icon(create)新建栏目</a>
        </div>
        <div class="item" onclick="menu.extend('%id%')">
            <a href="javascript:;" title="通过设置扩展属性，可以提供更多的信息！">$icon(edit)扩展设置</a>
        </div>
        <div class="item" onclick="menu.del('%id%')">
            <a href="javascript:;">$icon(delete)删除</a>
        </div>
        <div class="item" onclick="menu.refresh()">
            <a href="javascript:;">$icon(refresh)刷新</a>
        </div>
    </script>$js()
    <script type="text/javascript">

        Fn.table =null;
        Fn.currentRowIndex = -1;

        //刷新页面
        // Fn.refresh = function () {};

        //初始化表格及修改事件
        Fn.initTable = function (page) {
        	
        	var tables=document.getElementsByTagName('TABLE');
        	if(tables.length>=3){
	        	Fn.table=tables[2];
        	
	            //默认加载第一个分类
	            if (cms.$('pl').innerHTML == '') {
	                Fn.currentRowIndex = 0;
	            }
	            if (Fn.currentRowIndex != -1) {
	                var row = Fn.table.rows[Fn.currentRowIndex];
	                var id = row.getAttribute('indent');
	                if (id) {
	                    row.className = 'selected even';
	                    Fn.ids[Fn.ids.length == 0 ? 0 : Fn.ids.length - 1] = id;
	                    cms.load2('pl', 'category', 'update', 'disabled=true&lft=' + id);
	                }
	                Fn.currentRowIndex = -1;
	            }

	            cms.each(Fn.table.getElementsByTagName('TD'), function (i, e) {
	                cms.contextmenu.bind(e, '', function (menu) { menu.innerHTML = cms.template(cms.$('tpl').innerHTML, { id: e.parentNode.getAttribute('indent') }); });
	            });
	
	            cms.initTable(Fn.table, false, function () {
	                cms.load2('pl', 'category', 'update', 'lft=' + Fn.ids[Fn.ids.length - 1]);
	            });
            }
        };

        //加载数据
        Fn.loadData = function (page) {
            var _page = page || 1;
            cms.pagerLoad('plist', 'pager', _page, 'category', 'data', 'page=' + _page, Fn.initTable);
        };

        //创建
        Fn.create = function () {
            cms.load2('pl', 'category', 'create', '');
        };


        //绑定列表菜单
        cms.contextmenu.bind(cms.$('plist').parentNode, cms.$('list_menu_tpl').innerHTML);

        Fn.loadData(1);
        var menu = {
            add: Fn.create,
            extend:function(id){
                parent.M.dialog('category_extend', '扩展属性', '?module=extend&action=category_check&lft=' + id, true);
            },
            del: function (id) {
                if (confirm('确定删除吗?删除后将不可恢复!')) {
                    cms.xhr.jsonAjax('?', 'module=category&action=delete&lft=' + id,
                        function (json) {
                            if (json.result) {
                                Fn.currentRowIndex = Fn.getNextRowIndex(Fn.table, id) - 1;
                                Fn.loadData(1);
                                parent.M.loadCatTree();
                            } else { parent.M.alert(json.message); }
                        });
                }
            },
            refresh: Fn.loadData
        };
    </script>
    
    $iconcss()
</body>
</html>
